<template>
  <q-select ref="field" outlined v-model="model" use-input :options="optionsData" @filter="filterFn" behavior="menu" lazy-rules emit-value map-options
    @input="changeSelect" :rules="rules" :disable="disable" :readonly="readonly" :hide-bottom-space="hideBottomSpace" :dense="dense" :multiple="multiple"
    :clearable="clearable" class="col" @clear="clearData" :option-label="optionLabel" :option-value="optionValue">
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-grey">暂无数据</q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script>
export default {
  components: {},
  props: {
    value: [String, Object, Array],
    readonly: { type: Boolean, default: false },
    optionLabel: { type: String, default: 'label' },
    optionValue: { type: String, default: 'value' },
    dense: { type: Boolean, default: true },
    clearable: { type: Boolean, default: true },
    disable: { type: Boolean, default: false },
    multiple: { type: Boolean, default: false },
    hideBottomSpace: { type: Boolean, default: true },
    label: String,
    options: { type: Array, default: () => [] },
    rules: { type: Array, default: () => [] },
    formData: {
      type: Object,
    },
    formKey: {
      type: String,
    },
  },
  data() {
    return {
      model: '',
      optionsData: [],
    };
  },
  watch: {
    value() {
      if (this.model !== this.value) {
        this.init();
      }
    },
    options() {
      this.init();
    },
  },
  computed: {
  },
  methods: {
    clearData() {
      this.$emit('input', this.text);
    },
    init() {
      this.model = this.value;
      this.optionsData = JSON.parse(JSON.stringify(this.options));
    },
    filterFn(val, update) {
      const that = this;
      if (val === '') {
        update(() => {
          that.optionsData = JSON.parse(JSON.stringify(that.options));
        });
        return;
      }
      update(() => {
        that.optionsData = that.options.filter((v) => v.label.indexOf(val) > -1);
      });
    },
    validate() {
      return this.$refs.field.validate();
    },
    resetValidation() {
      return this.$refs.field.resetValidation();
    },
    changeSelect(v) {
      if (this.formData && this.formKey) {
        if (v instanceof Array) {
          const nameArray = [];
          this.formData[`${this.formKey}_text`] = '';
          v.forEach((id) => {
            const opt = this.optionsData.find((o) => o[this.optionValue] === id);
            if (opt) {
              nameArray.push(opt[this.optionLabel]);
            }
            this.formData[`${this.formKey}_text`] = nameArray.join(',');
          });
        } else {
          const opt = this.optionsData.find((o) => o[this.optionValue] === v);
          if (opt) {
            this.formData[`${this.formKey}_text`] = opt[this.optionLabel];
          }
        }
      }
      this.$emit('input', v);
    },
  },
  created() { },
  mounted() {
    if (this.multiple) {
      this.model = [];
    }
    if (this.value) {
      this.init();
    }
  },
};
</script>
<style lang="stylus"></style>
